const path = require('path')
// 启用热更新的第二步
const webpack = require('webpack')
// 导入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 导入vue-loader的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {

    // 手动指定入口和出口
    entry:path.join(__dirname,'./src/index.js'),
    output:{ //输出文件相关的配置
        path:path.join(__dirname,'./dist'), //指定打包文件要输出到哪个目录
        filename:'main.js' // 指定输出的文件的名称
    },
    devServer:{ //配置dev-server 命令参数的第二种形式
        open: true, //自动打开浏览器
        port: 3000, //设置启动的运行端口
        contentBase: "src",//指定托管的根目录
        hot: true //启用热更新 的第一步
    },
    plugins:[ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //这是new一个热更新的模块对象，是启用热更新的第三步
        // html-webpack-plugin插件的使用
        new htmlWebpackPlugin({ //创建一个在内存中 生成HTML页面 的插件
            template: path.join(__dirname,'./src/index.html'), //要展示的页面
            filename:'index.html' //指定生成页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{ // 用于配置所有第三方模块的loader
        rules:[//第三方文件的匹配规则
            { test : /\.css$/, use:['style-loader','css-loader']}, //配置处理.css文件的第三方loader规则
            { test :/\.less$/, use:['style-loader','css-loader','less-loader']}, //配置处理.less文件的第三方loader规则
            { test : /\.scss$/, use:['style-loader','css-loader','sass-loader']},
            { test : /\.jpg|jpeg|bmp|gif|png$/, use:'url-loader'}, //处理图片路径的loader
            { test : /\.ttf|eot|svg|woff|dtd|woff2$/, use:['url-loader']},// 处理字体文件
            // { test : /\.js$/, use : 'babel-loader', exclude:'/node_modules/'}, //将js高级语法转低级语法
            { test : /\.vue$/, use: 'vue-loader'}, //处理.vue文件的loader
        ]
    },
    resolve:{
        alias:{
            "vue$":'vue/dist/vue.js', //修改vue被导入包的路径
        }
    }
}

// 当在控制台直接输入webpack命令执行的时候，webpack做了一下步骤
// 1.首先，webpack发现，我们并没有通过命令的形式 给它指定入口和出口，
// 2.webpack就会去根目录中找一个叫做 webpack.config.js 的配置文件
// 3.找到后会执行这个配置文件，当解析执行完，就得到配置文件中导出的配置对象
// 4.当webpack拿到配置对象后，就拿到对象中 入口和出口，然后进行打包构建

// 使用 webpack-dev-server 这个工具来实现自动打包编译

// webpack-dev-server 常用的命令
// --open 运行指令自动打开浏览器访问http://localhost:port/
// --port 3000 设置URL的端口 
// --contentBase src 设置默认访问的文件
// --hot 只在修改的代码打补丁，不会全部代码重新加载 实现网页不刷新就能显示样式


// 使用webpack插件  html-webpack-plugin